<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<%@ include file="../common/required.jspf" %>
		<meta charset="utf-8" />
		<title>网上书城-结算</title>
		<link rel="stylesheet" type="text/css" href="${ctx}/statics/common/vendor/normalize.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" href="${ctx}/statics/common/vendor/font-awesome/css/font-awesome.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" type="text/css" href="${ctx}/statics/common/vendor/bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="${ctx}/statics/common/vendor/swiper/swiper.min.css" />
		<link rel="stylesheet" href="${ctx}/statics/store/css/common.css" />
		<link rel="stylesheet" href="${ctx}/statics/store/css/orderlist.css" />
		<!-- 苹果设备在桌面上生成的快捷图标 -->
		<link rel="apple-touch-icon" href="${ctx}/statics/store/img/apple-touch-icon.png">
		<link rel="icon" href="${ctx}/favicon.ico">
		<style type="text/css">
			.keep-address{
			    height: .35rem;
			    width: 100%;
			    padding-right: .1rem;
			    
			}
			.keep-address a {
				display: block;
				height:.3rem;
				width:.6rem;
				line-height:.3rem;
				background-color: #00B500;
				color: white;
				border-radius: .05rem;
				float: right;
				font-size: 0.16rem;
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<%@ include file="../common/header.jspf" %>
		<section style="width: 100%; height: .6rem;"></section>
			
		<%-- <section class="shopping-address">
			<a href="${ctx }/${ctx }/store/shopping/listReseiveAddress">管理收货地址</a>
		</section> --%>
		<section class="orderlist-main">
			<div class="main-goods">
				<h3 style=" margin-top: 20px;margin-bottom: 10px;">收货人地址</h3>
				<div class="goods-form">
						<c:forEach items="${receiveAddresses }" var="receiveAddress" varStatus="v">
						<c:if test="${receiveAddress.state=='0'}">
							 <input type="radio" value="${receiveAddress.id }" checked="checked" name="address" id="address2" class="address" style="cursor: pointer;"/>&nbsp;<label for="address2" class="form-label">${receiveAddress.province } ${receiveAddress.city } ${receiveAddress.area } ${receiveAddress.address }</label>
						</c:if>
					    <c:if test="${receiveAddress.state!='0'}">
					    	<input type="radio" value="${receiveAddress.id }" name="address" id="address2" class="address" style="cursor: pointer;"/>&nbsp;<label for="address2" class="form-label">${receiveAddress.province } ${receiveAddress.city } ${receiveAddress.area } ${receiveAddress.address }</label>
					    </c:if>
					    <p><span>姓名：</span>${receiveAddress.receiver }  &nbsp;&nbsp;<span>手机号码:</span>${receiveAddress.phone }</p>
					    <div class="form-solid"></div>
					    </c:forEach>
					    <div id="showNewAddressPart"></div>
					    <form id="addNewAddress" >
					    <input type="radio" onchange="orderList.useNewAddress(this)" name="address" id="new-address" style="cursor: pointer;"/>&nbsp;<label for="new-address" class="form-label">使用新的收货地址</label>
					    <div class="form-new-address" id="newAddressPart">
					    	<div class="address-inner">
					    		<span>收货人姓名:</span><br />
					    		<input type="text" id="receiver" name="receiver" value="" class="input"/>
					    		<span>所在地区：</span><br />
					    		<select id="province" name="province" style="width: 1.3rem;height: .4rem;">
					    			<option value="">--请选择所在省市--</option>
					    			<option value="北京市">北京市</option>
					    			<option value="上海市">上海市</option>
					    			<option value="重庆市">重庆市</option>
					    		</select>&nbsp;&nbsp;
					    		<select id="city" name="city" style="width: 1.3rem;height: .4rem;">
					    			<option value="">--请选择所在城市--</option>
					    			<option value="长沙">长沙</option>
					    			<option value="武汉">武汉</option>
					    			<option value="昆明">昆明</option>
					    		</select>&nbsp;&nbsp;
					    		<select id="area" name="area" style="width: 1.3rem;height: .4rem;">
					    			<option value="">--请选择所在地区--</option>
					    			<option value="沙坪坝区">沙坪坝区</option>
					    			<option value="呈贡区">呈贡区</option>
					    			<option value="五华区">五华区</option>
					    		</select><br />
					    		<span>详细地址:</span><br />
					    		<input id="address" name="address" type="text" value="" class="input"/><br />
					    		<span>手机号码:</span><br />
					    		<input type="text" id="phone" name="phone" class="input" value="" /><br />
					    		<!-- <input type="checkbox" id="address"/>&nbsp;<label for="address" class="text">自动保存收货地址（选择后该地址将会保存到你的收货地址列表）</label> -->
					    		<div class="keep-address"><a onclick="orderList.saveNewAddress()">保存</a></div>
					    	</div>
					    </div>
					</form>
				</div>
			</div>
			<div class="main-goods">
				<h3 style=" margin-top: 20px;margin-bottom: 10px;">发票信息</h3>
				<div class="goods-form">
					<form id="ticketForm" >
		    			<input onchange="orderList.needInvoice(this)" type="checkbox" name="isNeedInvoice" id="invoice" value="true"/>&nbsp;<label for="invoice" class="text1">是否开发票</label>
		    			<div id="invoicePart" class="form-invoice">
		    				<div class="invoice-inner">
		    					<span>发票类型：</span><br />
		    					<select name="type" class="inner-type">
		    						<option value="1">普通发票</option>
		    						<option value="2">增值税发票</option>
		    					</select><br />
		    					<span>发票抬头：</span><br />
		    					<select name="titleType" class="inner-title">
		    						<option value="1">个人</option>
		    						<option value="2">单位</option>
		    					</select>
		    					<input name="title" type="text" value="" />
		    				</div>
		    			</div>
					</form>
				</div>
			</div>
			
			<div class="main-goods-list">
				<h3 style=" margin-top: 20px;margin-bottom: 10px;">商品清单</h3>
				<table class="table table-bordered">
					<tr>
						<th>商品名称</th>
						<th>数量</th>
						<th>小计</th>
					</tr>
					<input type="hidden" id="storeOrderProductId" value="${productsIds }" />
					<c:forEach items="${products }" var="product" varStatus="v">
					<tr>
						<td>${product.name }</td>
						<td>${product.count }</td>
						<td>${product.subtotal }</td>
					</tr>
					</c:forEach>
				</table>
			</div>
			
			<div class="main-message">
				<h3 style=" margin-top: 20px;margin-bottom: 10px;">给卖家留言</h3>
				<input type="text" id="message-input" value="" />
			</div>
		</section>
        
	<div style="height:.5rem"></div>
        <footer class="orderlist-footer">
        	<div class="footer-left">
        		<span class="left-price">总价： <span>￥${allTotalPrice }</span></span>
        		<input type="hidden" id="totalPrice" value="${allTotalPrice }" />
        	</div>
        	<div class="footer-right">
        		<a href="#" onclick="orderList.payForOrder()">提交订单</a>
        	</div>
        </footer>
		<script src="${ctx }/statics/store/js/resize.js"></script>

		<script src="${ctx }/statics/common/vendor/zepto.min.js"></script>
		<script src="${ctx }/statics/common/vendor/jquery.min.js"></script>
		<script src="${ctx }/statics/common/vendor/swiper/swiper-3.4.0.jquery.min.js"></script>
		<script src="${ctx }/statics/common/vendor/swiper/swiper.animate1.0.2.min.js"></script>
		<script src="${ctx }/statics/common/vendor/hammer.min.js"></script>
		<script type="text/javascript">
		$(function(){ 
			orderList.init();
		})
		var orderList = {
				init : function(){
					$('input:radio').click(function () { 
						if(this.id == "new-address"){
							var all = $('input:radio');
							for(var i = 0; i < all.length-1; i++){
								all[i].checked=false;
							}
						}else{
							$('#new-address').attr('checked',false);
							$('#newAddressPart').hide();
						}
					}); 
				},
				getDefualtaddress : function(){
					
				},
				needInvoice : function test(obj){
					if(obj.checked){
						$('#invoicePart').show();
					}else{
						$('#invoicePart').hide();
					}
				},
				
				useNewAddress : function(obj){
					if(obj.checked){
						$('#newAddressPart').show();
					}else{
						$('#newAddressPart').hide();
					}
				},
				saveNewAddress : function(){
					if(orderList.checkAddress()){
						$.post("${ctx }/store/shopping/addNewAddress",$("#addNewAddress").serialize(),function(receiveAddress){
						    var html=[];
						    html.push('<input type="radio" checked="checked" value="' + receiveAddress.id + '" name="address" id="address2" class="address" style="cursor: pointer;"/>&nbsp;<label for="address2" class="form-label">' + receiveAddress.province + ' ' + receiveAddress.city + ' ' + receiveAddress.area + ' ' + receiveAddress.address + '</label>');
							html.push('<p><span>姓名：</span>' + receiveAddress.receiver + '&nbsp;&nbsp;<span>手机号码:</span>' + receiveAddress.phone + '</p>');
							html.push('<div class="form-solid"></div>');
							$('#showNewAddressPart').append(html.join(''));
							document.getElementById("addNewAddress").reset();
							$('#newAddressPart').hide();
							orderList.init();
						},'json');	
					}
				},
				
				
				getParam : function(){
					var myArray = [{
						name: "addressId",
						value: $('input:radio[name="address"]:checked').val()
					},
					{
						name: "storeOrderProductId",
						value: $('#storeOrderProductId').val()
					},
					{
						name: "msg",
						value: $('#message-input').val()
					},
					{
						name: "total",
						value: $('#totalPrice').val()
					}];
					/* myArray["addressId"] = $('input:radio[name="address"]:checked').val();
					myArray["storeOrderProductId"]= $('#storeOrderProductId').val();
					myArray["msg"]= $('#message-input').val();
					myArray["total"]= $('#totalPrice').val(); */
					var param;
					if(document.getElementById("invoice").checked){
						var tiketArray = $("#ticketForm").serializeArray();
						param = myArray.concat(tiketArray);
					}else{
						param = myArray;
					}
					console.info(param);
					return $.param(param);
					
				},
				
				payForOrder : function(){
					var param = orderList.getParam();
					$.post("${ctx }/store/shopping/payForOrder",param,function(data){
						alert("支付成功！");
						location="${ctx}/shopping/product/showAllProducts.action";
					})
				},
				checkAddress : function(){
					var receiver = $('#receiver').val();
					var province = $('#province').val();
					var city = $('#city').val();
					var area = $('#area').val();
					var address = $('#address').val();
					var phone = $('#phone').val();
					if(receiver == "" || receiver == null){
						alert("收货人不能为空!");
						return false;
					}else if(province == "" || province == null){
						alert("省市不能为空!");
						return false;
					}else if(city == "" || city == null){
						alert("城市市不能为空!");
						return false;
					}else if(area == "" || area == null){
						alert("地区不能为空!");
						return false;
					}else if(address == "" || address == null){
						alert("详细地址不能为空!");
						return false;
					}else if(phone == "" || phone == null){
						alert("联系电话不能为空!");
						return false;
					}else if(!new RegExp("^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))[0-9]{8}$").test(phone)){
						alert("请输入正确的联系电话!");
						return false;
					}else{
						return true;
					}
				}
				
		}
			
		</script>
	</body>
</html>
